<template>
    <div class="container">
        <div class="opt-area-02">
            <div class="right-con">
              <div class="input-frame" style="width: 164px">
                <Select v-model="jzd_company_code_select_obj" placeholder="请选择接种点" filterable style="width: 100%" @on-change="jzdSelectChange">
                  <Option v-for="obj in bindList" :value="JSON.stringify(obj)" :key="obj.ym_company_code">{{obj.ym_company_name}}</Option>
                </Select>
              </div>
              <div class="input-frame" style="width: auto">
                <Select v-model="ymselectdata" placeholder="疫苗信息" filterable style="width: 100%" @on-change="changeSelectYm(ymselectdata)">
                  <Option v-for="obj in inoculation_list" :value="JSON.stringify(obj)" :key="obj.id">{{obj.qy_name}}，{{obj.ym_zj_num}}针剂</Option>
                </Select>
              </div>
              <div class="input-frame" style="width: auto;line-height: 2rem">
                当前社区疫苗可预约数量：<span v-if="this.ymselectdata">{{ym_select_data.ym_num - ym_select_data.ym_use_num}}</span>
              </div>
            </div>
              <div class="right-con">
                <div class="input-frame" style="width: 164px">
                    <Input type="text" @on-click="selectlist(1)" placeholder="请输入姓名" style="width: 164px" v-model="params.name"
                           icon="ios-search"/>
                </div>
                <div class="input-frame" style="width: 164px">
                    <Input type="text" @on-click="selectlist(1)" placeholder="请输入身份证号" style="width: 164px" v-model="params.card_no"
                           icon="ios-search"/>
                </div>
                <div class="input-frame" style="width: 164px">
                    <Input type="text" @on-click="selectlist(1)" placeholder="请输入联系方式" style="width: 164px" v-model="params.mobile"
                          icon="ios-search"/>
                </div>
                <!-- <div class="input-frame" style="width: 164px">
                    <Input type="text" @on-click="selectlist(1)" placeholder="请输入批次号" style="width: 164px" v-model="params.vaccines_no"
                          icon="ios-search"/>
                </div> -->
                <Button type="info" size="small" @click="selectlist(1)" style="margin-top: 5px">搜索</Button>
                <Button type="info" size="small" @click="modal2 = true, formData2 = {}" style="margin-top: 5px;margin-left: 10px">接种登记</Button>
            </div>
        </div>
        <Table :loading="countData.loading" border :columns="columns2" :data="fcDataList" size="small" ref="table">
<!--            <template slot-scope="{ row }" slot="photo_url">-->
<!--              <img :src="row.photo_url" alt="" style="width:20px;height:30px">-->
<!--            </template>-->
            <template slot-scope="{ row }" slot="vaccines_needle">
              {{row.vaccines_needle}}针剂
            </template>
          <template slot-scope="{ row }" slot="vaccines_num">
              第{{row.vaccines_num}}针
            </template>
<!--            <template slot-scope="{ row }" slot="infoArea">-->
<!--              <span>{{row.infoArea}}{{row.street}}{{row.community}}</span>-->
<!--            </template>-->
            <template slot-scope="{ row }" slot="action" >
              <Button class="table-action-btn" type="success" size="small" @click="distribution(row, 'edit', params.states)">分配</Button>
<!--              <Button class="table-action-btn" type="success" size="small" @click="showPzModel(row)">打印凭证</Button>-->
            </template>
        </Table>
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>Loading</div>
            </Spin>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="page_style">
          <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
                show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
        <Drawer title="分配信息" v-model="modal1" width="50" :styles="styles">
            <Form :model="formData">
                <Row :gutter="32" class="mb20">
                  <Col span="24">
                    <h3>分配记录</h3>
                  </Col>
                </Row>
                <Row :gutter="32">
                  <Col span="24">
                      <Table border :columns="columns3" :data="log_list" size="small" style="margin-bottom:10px;">
<!--                        <template slot-scope="{ row }" slot="vaccines_num">-->
<!--                          <span v-if="row.vaccines_num == '1'">第一针</span>-->
<!--                          <span v-if="row.vaccines_num == '2'">第二针</span>-->
<!--                          <span v-if="row.vaccines_num == '3'">第三针</span>-->
<!--                        </template>-->
                        <template slot-scope="{ row }" slot="ym_zj_num">
                          <span>{{row.ym_zj_num}}针剂</span>
                        </template>
                        <template slot-scope="{ row }" slot="inoculation_start_time">
                          <span>{{row.inoculation_start_time}}-{{row.inoculation_end_time}}</span>
                        </template>
                        <template slot-scope="{ row }" slot="state">
                          <div v-if="row.state ==='0'">
                            未核销
                          </div>
                          <div v-if="row.state ==='1'">
                            已核销
                          </div>
                          <div v-if="row.state ==='2'">
                            已取消
                          </div>
                          <div v-if="row.state ==='3'">
                            超时取消
                          </div>
                        </template>
                        <template slot-scope="{ row }" slot="action">
                          <Button v-if="row.state === '0'" class="table-action-btn" type="error" size="small" @click="cancelAppoint(row, 'edit')">取消分配</Button>
                          <Button v-if="row.state === '0'" class="table-action-btn" type="success" size="small" @click="showPzModel(row)">打印凭证</Button>
                        </template>
                      </Table>
                  </Col>
                </Row>
                <Divider>分配信息</Divider>
                <Card style="width:100%">
                  <Row :gutter="32">
                    <Col span="24">
                      <FormItem
                        label="接种地点" label-position="top">
                        <Select v-model="jzd_company_codeobj" placeholder="请选择接种点" filterable style="width: 100%" @on-change="jzdChange(jzd_company_codeobj)">
                          <Option v-for="obj in bindList" :value="JSON.stringify(obj)" :key="obj.ym_company_code">{{obj.ym_company_name}}</Option>
                        </Select>
                      </FormItem>
                    </Col>
                  </Row>
                  <Row :gutter="32">
                      <Col span="24">
                          <FormItem label="接种日期" label-position="top" >
                              <DatePicker type="date" @on-open-change="TestOpen" :options="options" v-model="formData.reserved_date" placeholder="请选择接种日期" style="width: 100%" @on-change="dateChange"></DatePicker>
                          </FormItem>
                      </Col>
                  </Row>
                  <Row :gutter="32">
                    <Col span="24">
                      <FormItem label="当天可预约针次" label-position="right">
                        <Select v-model="needle_type" placeholder="当天可预约针次" filterable style="width: 100%" @on-change="changeInfo(needle_type)">
                          <Option v-for="obj in numList" :value="obj.needle_type" :key="obj.needle_type">第{{obj.needle_type}}针</Option>
                        </Select>
                      </FormItem>
                    </Col>
                  </Row>
                  <Row :gutter="32">
                    <Col span="24">
                      <FormItem label="疫苗信息" label-position="right">
                        <Select v-model="ymdata" placeholder="疫苗信息" filterable style="width: 100%" @on-change="changeYm(ymdata)">
                          <Option v-for="obj in inoculation_list" :value="JSON.stringify(obj)" :key="obj.id">{{obj.qy_name}}，{{obj.ym_zj_num}}针剂，社区可预约数量：{{obj.ym_num - obj.ym_use_num}}</Option>
                        </Select>
                      </FormItem>
                    </Col>
                  </Row>
                  <Row :gutter="32">
                    <Col span="24">
                      <FormItem label="预约时间段" label-position="right">
                        <Select v-model="yuyueDate" placeholder="请选择预约时间段" filterable style="width: 100%" @on-change="yuyueDateChange(yuyueDate)">
                          <Option v-for="(obj,index) in yuyueDateList" :value="JSON.stringify(obj)" :key="index">{{obj.appoint_start_time}}~{{obj.appoint_end_time}}，接种点可预约数量：{{obj.have_num}}</Option>
                        </Select>
                      </FormItem>
                    </Col>
                  </Row>
                </Card>
            </Form>
            <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="modal1 = false">取消</Button>
                <Button type="primary" @click="submit">提交</Button>
            </div>
        </Drawer>
      <Drawer title="接种登记" v-model="modal2" width="700" :styles="styles">
        <Form :model="formData2">
          <Card style="width:100%">
<!--            <Row :gutter="32">-->
<!--              <Col span="24">-->
<!--                <FormItem-->
<!--                  label="针剂类型" label-position="top">-->
<!--                  <Select v-model="formData2.vaccines_needle" placeholder="请选择针剂类型" filterable style="width: 100%">-->
<!--                    <Option value="1" >一针剂</Option>-->
<!--                    <Option value="2" >二针剂</Option>-->
<!--                    <Option value="3" >三针剂</Option>-->
<!--                  </Select>-->
<!--                </FormItem>-->
<!--              </Col>-->
<!--            </Row>-->
<!--            <Row :gutter="32">-->
<!--              <Col span="24">-->
<!--                <FormItem-->
<!--                  label="当前针次" label-position="top">-->
<!--                  <Select v-model="formData2.vaccines_num" placeholder="请选择当前针次" filterable style="width: 100%">-->
<!--                    <Option value="1">第一针</Option>-->
<!--                    <Option value="2" v-if="this.formData2.vaccines_needle != '1'">第二针</Option>-->
<!--                    <Option value="3" v-if="this.formData2.vaccines_needle === '3'">第三针</Option>-->
<!--                  </Select>-->
<!--                </FormItem>-->
<!--              </Col>-->
<!--            </Row>-->
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="姓名" label-position="top">
                  <Input type="text" placeholder="请输入姓名" style="width: 100%" v-model="formData2.name"/>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="证件类型" label-position="top">
                  <Select  v-model="formData2.card_type" placeholder="选择证件类型" filterable >
                    <Option v-for="obj in dicList" :value="obj.value" :key="obj.id">{{obj.label}}</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="证件号码" label-position="right">
                  <Input type="text" placeholder="请输入证件号码" style="width: 100%" v-model="formData2.cardNo"/>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="手机号" label-position="right">
                  <Input type="text" placeholder="请输入手机号" style="width: 100%" v-model="formData2.mobile"/>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="32">
              <Col span="24">
                <FormItem
                  label="详细地址" label-position="right">
                  <Input type="text" placeholder="请输入详细地址" style="width: 100%" v-model="formData2.address"/>
                </FormItem>
              </Col>
            </Row>
          </Card>
        </Form>
        <div class="demo-drawer-footer">
          <Button style="margin-right: 8px" @click="modal2 = false">取消</Button>
          <Button type="primary" @click="addHelp">提交</Button>
        </div>
      </Drawer>
      <Modal v-model="pzModel" title="新冠疫苗接种凭证" width="900">
        <div style="background-color:white;line-height: 2.5;position:relative;width: 100%;height: 500px;" class="notice-content" id="printMe1">
          <div class="title">新冠疫苗接种凭证</div>
          <div style="font-size: 1rem">
            <div class="notice-name">尊敬的 <u>{{pzdata.name}}</u> 先生/女士:</div>
            <div class="notice-context">请于 <u>{{pzdata.inoculation_start_time + '~' + pzdata.inoculation_end_time}}</u>
             持本凭证到 <u>{{pzdata.appoint_name}}</u>进行疫苗接种。您的预约码为<u>{{pzdata.lineup_no}}</u>
              （本凭证仅限当日预约时段有效）。
            </div>
            <div class="notice-address"><u>{{$store.state.user.severUserInfo.company_name}}</u></div>
            <div class="notice-date">
              <u>{{pzdata.aa}}</u>年
              <u>{{pzdata.bb}}</u>月
              <u>{{pzdata.cc}}</u>日
            </div>
          </div>
          <div id="qrcode1" ref="qrcode1" style="position: absolute;margin-top: -12%;"></div>
        </div>
        <div slot="footer">
          <Button type="success" v-print="'#printMe1'">打印</Button>
          <Button type="error" @click="pzModel=false">关闭</Button>
        </div>
      </Modal>
    </div>
</template>

<script>
import {
  doPostList,
  date0str,
  date2str,
  findCommunityYMList,
  findPeopleLogFromYmcList,
  saveCommunityAllocationInfoFromYmc,
  updateCommunityTimeFromymc,
  getVacInfoList, addHelpAppoint, findAppointmentSettingList, getAppointDayList, getAppointNeedleList
} from '@/api/yi-qing-fang-kong'
import { getDictList } from '@/api/common'
import QRCode from 'qrcodejs2'
// import saveparams from '@/view/yi-qing-fang-kong/saveparams.vue'
export default {
  name: 'list',
  data () {
    return {
      needle_type: '',
      dateList: [],
      numList: [],
      options: {
        disabledDate () {
        }
      },
      ym_select_data: {},
      jzd_company_code_select_obj: '',
      pzdata: {},
      pzModel: false,
      dicList: [],
      yuyueDate: '',
      yuyueDateList: [],
      jzd_company_codeobj: '',
      formData2: {},
      modal2: false,
      jlDataList: [],
      ymdata: '',
      ymselectdata: '',
      inoculation_list: '', // 接种点下拉列表
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {},
      modal1: false,
      loadData: true,
      loading: false,
      fcAllDataList: [],
      countData: { loading: false, fcnum: 0, ytbnum: 0, zcnum: 0 },
      params: { pageNo: 1, pageSize: 10, totalRecord: 0 },
      columns2: [
        { title: '序号', type: 'index', width: 60, align: 'center' },
        // { title: '头像', slot: 'photo_url', align: 'center' },
        { title: '接种人姓名', key: 'name', align: 'center' },
        { title: '证件号码', key: 'card_no', align: 'center' },
        { title: '手机号', key: 'mobile', align: 'center' },
        { title: '现住址', key: 'address', width: 260, align: 'center' },
        // { title: '针剂类型', slot: 'vaccines_needle', align: 'center' },
        // { title: '当前针次', slot: 'vaccines_num', align: 'center' },
        { title: '操作', slot: 'action', align: 'center', width: 100 }
      ],
      columns3: [ // 分配记录
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '姓名', key: 'name', width: 80, align: 'center' },
        // { title: '当前针次', slot: 'vaccines_num', width: 100, align: 'center' },
        // { title: '针剂', slot: 'ym_zj_num', width: 100, align: 'center' },
        { title: '接种时间段', slot: 'inoculation_start_time', width: 155, align: 'center' },
        { title: '状态', slot: 'state', align: 'center' },
        { title: '操作', slot: 'action', width: 200, align: 'center' }
      ],
      bindList: [],
      fcDataList: [],
      paramData: {},
      personel_id: '',
      jzd_company_code: '',
      vaccines_num: '', // 第几针
      card_no: '',
      log_list: []
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  watch: {
  },
  methods: {
    getAppointNeedleList () {
      let obj = JSON.parse(this.jzd_company_codeobj)
      let reserved_date = date2str(this.formData.reserved_date)
      let params = {
        reserved_date: reserved_date,
        appoint_company_code: obj.ym_company_code
      }
      getAppointNeedleList(params).then(res => {
        if (res.data.errcode === 0) {
          this.numList = res.data.data.data
        } else {
          that.$Notice.error({
            title: '获取可预约针次列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    TestOpen (data) {
      let that = this
      // this.dateList.forEach(function (item, index) {
      //   let date = item.appoint_day
      if (data) {
        that.options = {
          disabledDate: date => {
            // 当前年份
            let DateYear = date.getFullYear()
            // 当前月份
            let DateMonth =
              date.getMonth() + 1 < 10
                ? '0' + (date.getMonth() + 1)
                : date.getMonth() + 1
            // 当前日期
            let DateDay = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            // 将所获得的日期拼接起来，格式为YY-MM-DD
            let FullDate = DateYear + '-' + DateMonth + '-' + DateDay
            // 判断，将不存在于接口数据中的日期禁用
            let dateList = []
            console.log(that.dateList, 'dateList')
            that.dateList.forEach(function (params, index) {
              dateList[index] = params.appoint_day
              console.log(dateList, 'params')
            })
            // console.log(dateList.indexOf(FullDate), 'that.dateList.indexOf(FullDate)')
            if (dateList.indexOf(FullDate) === -1) {
              return DateDay
            }
          }
        }
      }
      // })
    },
    getCode (codeUrl) {
      document.getElementById('qrcode1').innerHTML = ''
      var qrcode = new QRCode(document.getElementById('qrcode1'), {
        text: codeUrl,
        top: 0,
        width: 150,
        height: 150,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      console.log(qrcode, 'qrcode')
    },
    showPzModel (item) {
      console.log(item)
      this.pzdata = item
      this.pzdata.date = this.pzdata.inoculation_start_time.substring(0, 10)
      this.pzdata.aa = this.pzdata.inoculation_start_time.substring(0, 4)
      this.pzdata.bb = this.pzdata.inoculation_start_time.substring(5, 7)
      this.pzdata.cc = this.pzdata.inoculation_start_time.substring(8, 10)
      this.getCode(item.card_no)
      this.pzModel = true
    },
    findAppointmentSettingList (item) {
      let params = {
        jzd_company_code: this.jzd_company_code,
        reserved_date: date2str(this.formData.reserved_date),
        ym_pid: this.paramData.ym_base_pici_id,
        needle_type: this.needle_type
      }
      findAppointmentSettingList(params).then(res => {
        console.log(res)
        if (res.data.errcode === 0 && res.data.data.errcode === 0) {
          this.yuyueDateList = res.data.data.data
          console.log(this.yuyueDateList, 'pppp')
        } else {
          this.$Notice.error({
            title: '获取时间段失败',
            desc: res.data.data.errmsg
          })
        }
      })
    },
    dateChange (item) {
      this.ymdata = ''
      this.yuyueDate = ''
      this.yuyueDateList = []
      this.inoculation_list = []
      this.numList = []
      this.findAppointmentSettingList()
      this.getInoculationData(this.jzd_company_code)
      this.getAppointNeedleList()
      console.log(item)
    },
    changeInfo (item) {
      this.ymdata = ''
      this.yuyueDate = ''
      this.yuyueDateList = []
      this.inoculation_list = []
      this.findAppointmentSettingList()
      this.getInoculationData(this.jzd_company_code)
      this.getAppointNeedleList()
    },
    yuyueDateChange (item) {
      let dateObj = JSON.parse(item)
      this.formData.appoint_start_time = dateObj.appoint_start_time
      this.formData.appoint_end_time = dateObj.appoint_end_time
      this.formData.appoint_id = dateObj.id
      console.log(this.formData)
    },
    jzdChange (item) {
      this.ymdata = ''
      this.yuyueDate = ''
      this.formData.reserved_date = ''
      this.formData.appoint_start_time = ''
      this.formData.appoint_end_time = ''
      this.formData.appoint_id = ''
      this.numList = []
      this.dateList = []
      let jzdObj = JSON.parse(item)
      let ym_company_code = jzdObj.ym_company_code
      this.jzd_company_code = ym_company_code
      this.getInoculationData(ym_company_code)
      this.findAppointmentSettingList()
      this.getAppointDayList(item)
      console.log(jzdObj)
    },
    jzdSelectChange (item) {
      let jzdObj = JSON.parse(item)
      this.getInoculationData(jzdObj.ym_company_code)
      console.log(item)
    },
    getVacInfoList () {
      getVacInfoList({ 'xg_company_code': this.$store.state.user.severUserInfo.company_code }).then(res => {
        if (res.data.errcode === 0 && res.data.data.errcode === 0) {
          this.bindList = res.data.data.data.list
        } else {
          this.$Notice.error({
            title: '获取绑定接种点失败',
            desc: res.data.data.errmsg
          })
        }
      })
    },
    addHelp () {
      // if (!this.formData2.vaccines_needle) {
      //   this.$Notice.error({
      //     title: '添加失败',
      //     desc: '请填写针剂类型'
      //   })
      //   return
      // }
      // if (!this.formData2.vaccines_num) {
      //   this.$Notice.error({
      //     title: '添加失败',
      //     desc: '请填写当前针次'
      //   })
      //   return
      // }
      if (!this.formData2.name) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请填写姓名'
        })
        return
      }
      if (!this.formData2.card_type) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请选择证件类型'
        })
        return
      }
      if (!this.formData2.cardNo) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请填写证件号码'
        })
        return
      }
      if (this.formData2.card_type === '1') {
        var reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
        if (!reg.test(this.formData2.cardNo)) {
          this.$Notice.error({
            title: '添加失败',
            desc: '请填写正确证件号码'
          })
          return
        }
      }
      if (!this.formData2.mobile) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请填写手机号'
        })
        return
      }
      if (!this.formData2.address) {
        this.$Notice.error({
          title: '添加失败',
          desc: '请填写详细地址'
        })
        return
      }
      let params = this.formData2
      if (this.jzd_company_codeobj) {
        let obj = JSON.parse(this.jzd_company_codeobj)
        params.jzd_company_code = obj.ym_company_code
        params.place_name = obj.ym_company_name
      }
      addHelpAppoint(params).then(res => {
        if (res.data.errcode === 0 && res.data.data.errcode === 0) {
          this.$Notice.success({
            title: '成功',
            desc: '添加成功'
          })
          this.getList()
          this.modal2 = false
        } else {
          this.$Notice.error({
            title: '添加失败',
            desc: res.data.data.errmsg
          })
        }
      })
    },
    cancelAppoint (item) { // 取消分配
      if (confirm('确定取消分配吗？')) {
        updateCommunityTimeFromymc({ id: item.id }).then(res => {
          console.log(res.data, '32424234')
          if (res.data.errcode === 0 && res.data.data.errcode === 0) {
            this.$Notice.success({
              title: '成功',
              desc: '取消分配成功'
            })
            this.getList()
          } else {
            this.$Notice.error({
              title: '失败',
              desc: res.data.data.errmsg
            })
          }
        })
      }
    },
    changeYm (item) {
      this.yuyueDate = ''
      console.log(this.formData.reserved_date)
      if (!this.formData.reserved_date) {
        this.$Message.warning('请先选择接种日期')
        return
      }
      console.log(JSON.parse(item), 'item')
      this.paramData.ym_base_pici_id = JSON.parse(item).ym_pid
      this.paramData.id = JSON.parse(item).id
      this.findAppointmentSettingList()
    },
    changeSelectYm (item) {
      this.ym_select_data = JSON.parse(item)
      console.log(this.ym_select_data)
      // this.findAppointmentSettingList()
    },
    pageAction (page) {
      this.params.pageNo = page
      this.getList()
    },
    selectlist (inpageNo) {
      if (inpageNo) {
        this.params.pageNo = inpageNo
      } else {
        this.params.pageNo = 1
      }
      this.getList()
    },
    getList () {
      this.fcDataList = []
      this.loadData = true
      doPostList(this.params).then(res => {
        this.loadData = false
        let that = this
        if (res.data.errcode === 0) {
          that.fcDataList = res.data.data.data.results
          that.params.totalRecord = res.data.data.data.totalRecord
        } else {
          that.loadData = true
          that.$Notice.error({
            title: '查询列表信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo)
    },
    distribution (item) {
      console.log(item, 'itemememmem')
      this.personel_id = item.id
      this.jzd_company_code = item.jzd_company_code
      this.card_no = item.card_no
      this.needle_type = ''
      console.log(this.card_no, 'sfhengenzhag')
      this.getInoculationData(this.jzd_company_code)
      this.getJzList(item.card_no)
      this.formData = {}
      this.jzd_company_codeobj = ''
      this.ymdata = ''
      this.yuyueDate = ''
      this.modal1 = true
    },
    submit () { // 分配
      if (this.formData.appoint_start_time === '' || this.formData.appoint_start_time === undefined) {
        const content = '<p>请选择疫苗接种时间段</p>'
        this.$Modal.error({
          title: '错误',
          content: content
        })
        return
      }
      if (this.jzd_company_code === '' || this.jzd_company_code === undefined) {
        const content = '<p>请选择接种点</p>'
        this.$Modal.error({
          title: '错误',
          content: content
        })
        return
      }
      if (this.formData.appoint_end_time === '' || this.formData.appoint_end_time === undefined) {
        const content = '<p>请选择疫苗接种时间段</p>'
        this.$Modal.error({
          title: '错误',
          content: content
        })
        return
      }
      if (this.needle_type === '' || this.needle_type === undefined) {
        const content = '<p>请选择疫苗接种针剂</p>'
        this.$Modal.error({
          title: '错误',
          content: content
        })
        return
      }
      if (this.paramData.ym_base_pici_id === '' || this.paramData.ym_base_pici_id === undefined) {
        const content = '<p>请选择疫苗信息</p>'
        this.$Modal.error({
          title: '错误',
          content: content
        })
        return
      }
      if (this.formData.reserved_date === '' || this.formData.reserved_date === undefined) {
        const content = '<p>请选择接种日期</p>'
        this.$Modal.error({
          title: '错误',
          content: content
        })
        return
      }
      var param = {
        inoculation_start_time: date0str(this.formData.appoint_start_time),
        inoculation_end_time: date0str(this.formData.appoint_end_time),
        ym_base_pici_id: this.paramData.ym_base_pici_id,
        reserved_date: date2str(this.formData.reserved_date),
        setting_id: this.formData.appoint_id,
        card_no: this.card_no,
        id: this.paramData.id,
        appoint_code: this.jzd_company_code,
        vaccines_num: this.needle_type
      }
      saveCommunityAllocationInfoFromYmc(param).then(res => {
        if (res.data.errcode === 0 && res.data.data.errcode === 0) {
          this.$Notice.success({
            title: '成功',
            desc: '疫苗分配成功'
          })
          this.modal1 = false
          this.formData = {}
          this.paramData.ym_base_pici_id = ''
          this.card_no = ''
          this.this.paramData.id = ''
          this.jzd_company_code = ''
          this.getList()
        } else {
          this.$Notice.error({
            title: '失败',
            desc: res.data.data.errmsg
          })
        }
      })
    },
    getJzList (card_no) {
      findPeopleLogFromYmcList({ card_no: card_no }).then(res => {
        if (res.data.errcode === 0) {
          this.log_list = res.data.data.data
          this.vaccines_num = this.log_list.length + 1
          console.log(this.inoculation_list, '@#$@#$#@$@')
        } else {
          this.$Notice.error({
            title: '查询列表信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getInoculationData (jzd_company_code) { // 获取接种点列表
      findCommunityYMList({ jzd_company_code: jzd_company_code, company_code: this.companyCode, needle_type: this.needle_type, reserved_date: date0str(this.formData.reserved_date) }).then(res => {
        if (res.data.errcode === 0) {
          this.inoculation_list = res.data.data.data
        } else {
          this.$Notice.error({
            title: '失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    // 获取字典数据
    getDicInfo () {
      getDictList({ 'type': 'ymc_squser_cardtype' }).then(ret => {
        if (ret.data.errcode === 0) {
          this.dicList = ret.data.data.results
          console.log(this.dicList, '字典')
        } else {
          this.$Notice.error({
            title: '获取字典列表失败!',
            desc: ret.data.errmsg
          })
        }
      })
    },
    getAppointDayList (item) {
      let obj = JSON.parse(item)
      let params = {
        appoint_company_code: obj.ym_company_code
      }
      console.log('item.ym_company_code', obj)
      // item.appoint_company_code =
      getAppointDayList(params).then(res => {
        if (res.data.errcode === 0) {
          this.dateList = res.data.data.data
        } else {
          this.$Notice.error({
            title: '获取接种时间失败!',
            desc: res.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.getDicInfo()
    this.getVacInfoList()
    // this.getAppointDayList()
    let that = this
    setTimeout(function () {
      that.getList()
    }, 500)
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
    .title-style {
      color: red;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mt20 {
      margin-top: 20px;
    }
    .ivu-table-row {
      height: 57px;
    }
  .ivu-form-item-label {
    margin-top: 8px;
  }
    .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
      from { transform: rotate(0deg);}
      50%  { transform: rotate(180deg);}
      to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
      height: 100px;
      position: relative;
      /*border: 1px solid #eee;*/
    }
    .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }.title {
       text-align: center;
       font-size: 1.5rem;
       padding: 20px;
     }
    .notice-name {
      line-height: 2.5;
      margin-top: 6%;
    }
    .notice-context {
      text-indent: 2em;
      line-height: 2.5;
    }
    .notice-content1 {
      padding: 0 4% 0 12%;
      position:relative;
    }
    .notice-address {
      text-align: right;
      margin-top: 10%;
    }
    .notice-date {
      text-align: right;
    }
    .notice-name {
      line-height: 2.5;
      margin-top: 6%;
    }

</style>
